<template>
    <div class="play">
        <div class="background">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536658724930&di=22d761cec858e985ed076595acdae526&imgtype=0&src=http%3A%2F%2Fs10.sinaimg.cn%2Fbmiddle%2F5d593c08t722b8ad0bad9%26690" alt="">
        </div>
        <header class="play-header">
            <div class="back-icon" @click="back">
                <i class="icon iconfont icon-houtui"></i>
            </div>
            <div class="song-title">
                <p>{{ songTitle }}</p>
                <p>{{ songArtist }}</p>
            </div>
            <div class="share-icon">
                <i class="icon iconfont icon-fenxiang"></i>
            </div>
        </header>
        <section class="song-info">
            <div class="song-image">
                <!-- <img :src="songPicUrl" alt=""> -->
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536658724930&di=22d761cec858e985ed076595acdae526&imgtype=0&src=http%3A%2F%2Fs10.sinaimg.cn%2Fbmiddle%2F5d593c08t722b8ad0bad9%26690" alt="">
            </div>
            <div class="song-icon">
                <i class="icon iconfont icon-like"></i>
                <i class="icon iconfont icon-xiazai"></i>
                <i class="icon iconfont icon-weibiaoti-"></i>
                <i class="icon iconfont icon-gengduo"></i>
            </div>
        </section>
        <footer class="player-control">
            
            <audio preload="undefined" :src="url" @durationchange="songDuration" @timeupdate="updateTime($event)"></audio>
            
            <div class="controller">
                <div class="bar-wrap">
                    <div class="bar">
                        <div class="played" :style="{width: percentTime}">
                            <span></span>
                        </div>
                    </div>
                </div>
                <div class="player-time">
                    <div class="aplayer-time-inner">
                        -
                        <span class="aplayer-ptime">{{ format(currentTime) }}</span> /
                        <span class="aplayer-dtime">{{ format(duration) }}</span>
                    </div>              
                </div>
            </div>
            <div class="control-icon">
                <i class="icon iconfont icon-icon-"></i>
                <i class="icon iconfont icon-48shangyishou"></i>
                <i class="icon iconfont icon-bofang" @click="playControl"></i>
                <i class="icon iconfont icon-49xiayishou"></i>
                <i class="icon iconfont icon-liebiao"></i>
            </div>
        </footer>
        
    </div>
</template>

<script>
                

                //@TODO load played time point
                // 按播放 -> played width++ && aplayer-ptime++
    import Aplayer from 'vue-aplayer'
    import mFooter from '@/components/footer/mFooter.vue'
    import axios from 'axios'
    export default {
        components: {
            Aplayer,
            mFooter,
        },
        data: function () {
            return {
                url: "http://music.163.com/song/media/outer/url?id=" + this.$store.state.songId + ".mp3",
                songPicUrl: '',
                songTitle: '',
                songArtist: this.$store.state.artist,
                flag: false,
                status: 0, // 0 -> pause, 1 -> start
                duration: 0,
                currentTime: 0,
            }
        },
        created() {
            var vm = this
            axios.get("http://netease.bluej.cn/song/detail?ids=" + this.$store.state.songId)
                .then(function (res) {
                    console.log('song', res.data.songs)
                    console.log('res', res)
                    // var song = res.data.songs[0]
                    // vm.songTitle = res.data.songs[0].name
                    // vm.songPicUrl = res.data.songs[0].al.picUrl
                    vm.$store.commit('getInfo', {
                        // artist: song.ar[0].name,
                        // picUrl: song.al.picUrl,
                        // songTitle: song.name,
                        songUrl: vm.url,
                    })
                    // console.log('pic', this.songPicUrl)
                    vm.flag = true
                })
        },
        methods: {
            playControl: function () {
                var audio = document.getElementsByTagName('audio')[0]
                // console.log(document.getElementsByTagName('audio')[0].duration)
                if (this.status) {
                    audio.pause()
                    this.status = 0
                } else if (!this.status) {
                    audio.play()
                    this.status = 1
                }
            },
            songDuration: function () {
                this.duration = document.getElementsByTagName('audio')[0].duration
            },
            updateTime: function (e) {
                this.currentTime = e.target.currentTime
            },
            format(interval){
                interval = interval | 0;
                const minute = interval/60 | 0;
                const second = this._pad(interval % 60);
                return `${minute}:${second}`;  
            },
            _pad(num,n=2){
                let len = num.toString().length;
                while(len<n){
                num = '0' + num;
                len ++;
                }
                return num;
            },
            back() {
                this.$router.back()
            }
        },
        computed: {
            percentTime: function () {
                var point = this.currentTime / this.duration
                var str=Number(point*100).toFixed(2);
                str+="%";
                return str;
                // return (this.currentTime / this.duration)
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "@/common/css/variable.scss";
    @import "@/common/css/base.scss";
    .play {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 5%;
        .background {
            width: 100%;
            height: 100%;
            position: fixed;
            -webkit-filter: blur(10px);
            z-index: -1;
            transform: scale(0.9);
            left: -20px;
            top: -20px;
        }
        .play-header {
            display: flex;
            justify-content: space-between;
        }
        .song-info {
            width: 100%;
            height: 60%;
            padding-top: 20%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .song-image {
                width: 15rem;
                height: 15rem;
                border-radius: 50%;
                overflow: hidden;
                margin-bottom: 10%;
                img {
                    width: 100%;
                }
            }
            .song-icon {
                width: 100%;
                display: flex;
                justify-content: space-around;
                padding: 0 10%;
                .icon {
                    font-size: 1.5rem;
                    color: black;
                }
            }
        }
        .player-control {
            .control-icon {
                display: flex;
                justify-content: space-between;
                padding: 0 3%;
                .icon {
                    font-size: 1.6rem;
                }
            }
            .controller {
                display: flex;
                align-items: center;
                margin-bottom: 20%;
                margin-top: 20%;
                .bar-wrap {
                    flex: 1;
                    .bar {
                        position: relative;
                        height: 2px;
                        width: 100%;
                        background: #cdcdcd;
                        .played {
                            position: absolute;
                            left: 0;
                            top: 0;
                            bottom: 0;
                            height: 2px;
                            -webkit-transition: background-color .3s;
                            transition: background-color .3s;
                            will-change: width;
                            background-color: rgb(65, 184, 131);
                            span {
                                position: absolute;
                                top: 0;
                                right: 5px;
                                margin-top: -5px;
                                margin-right: -10px;
                                width: 10px;
                                height: 10px;
                                border: 1px solid rgb(65, 184, 131);
                                border-radius: 50%;
                                border-color: rgb(65, 184, 131);
                                background-color: rgb(255, 255, 255);
                            }
                        }
                    }
                }
                .player-time {
                    height: 17px;
                    color: #999;
                    font-size: 11px;
                    padding-left: 7px;
                }
            }
        }
    }
</style>